<template>
    <div class="mmv-banner">
        <div class="mmv-banner__container">
            <template v-for="(banner, index) in bannersRender">
                <div :class="{
                    'mmv-banner__prev2': index == prev2,
                    'mmv-banner__prev1': index == prev1,
                    'mmv-banner__active': index == active,
                    'mmv-banner__next1': index == next1,
                    'mmv-banner__next2': index == next2,
                }" :key="index" class="mmv-banner__slide">
                    <img :src="'https://upload-bbs.mihoyo.com/upload'+banner.img" />
                </div>
            </template>
            <div @click.stop="onClickButtons(-1)" class="mmv-banner__prev">
                <i class="mmv-icon iconfont icon-fanhui"></i>
            </div>
            <div @click.stop="onClickButtons(1)" class="mmv-banner__next">
                <i class="mmv-icon iconfont icon-xiaojiantou"></i>
            </div>
            <div class="mmv-banner__pagination">
                <template v-for="num in bannersLength">
                    <div :class="{'mmv-banner__bulletactive':num===paginationIndex}" :key="'bullet_'+num" class="mmv-banner__bullet"></div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            banners: [
                {
                    img: "/2020/11/29/1c86a6ea67f5ad6441b16c91b8c3d528.jpeg",
                },
                {
                    img: "/2020/11/30/df8247e5938ae2066a536401bd1fbe07.jpeg",
                },
                {
                    img: "/2020/11/11/34f51ce688f74fe476cbf365282830c0.png",
                },
                {
                    img: "/2020/11/23/6c2ae79c441bd1d46802291d24af76e7.png",
                },
                {
                    img: "/2020/11/26/58e6ae9832833f54f28a9168ce8849e3.jpeg",
                },
            ],
            active: 0,
            timer: null,
            speed: 3000,
        };
    },
    computed: {
        bannersLength() {
            return this.banners.length;
        },
        bannersRender() {
            const data = [...this.banners, ...this.banners];
            return data;
        },
        prev2() {
            let num = this.active - 2;
            if (num < -1) {
                num = this.bannersRender.length - 2;
            } else if (num < 0) {
                num = this.bannersRender.length - 1;
            }
            return num;
        },
        prev1() {
            let num = this.active - 1;
            if (num < 0) {
                num = this.bannersRender.length - 1;
            }
            return num;
        },
        next1() {
            let num = this.active + 1;
            if (num >= this.bannersRender.length) {
                num = 0;
            }
            return num;
        },
        next2() {
            let num = this.active + 2;
            if (num >= this.bannersRender.length + 1) {
                num = 1;
            } else if (num >= this.bannersRender.length) {
                num = 0;
            }
            return num;
        },
        paginationIndex() {
            let actived = this.active + 1;
            if (actived > this.bannersLength) {
                actived = actived - this.bannersLength;
            }
            return actived;
        },
    },
    mounted() {
        this.initInterval();
        document.addEventListener("visibilitychange", this.onVisibilitychange);
    },
    destroyed() {
        clearInterval(this.timer);
        document.removeEventListener("visibilitychange", this.onVisibilitychange);
    },
    methods: {
        onVisibilitychange() {
            if (document.visibilityState === "visible") {
                this.initInterval();
            } else {
                clearInterval(this.timer);
            }
        },
        initInterval() {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (this.active + 1 >= this.bannersRender.length) {
                    this.active = 0;
                } else {
                    this.active++;
                }
            }, this.speed);
        },
        onClickButtons(num) {
            if (this.active + num >= this.bannersRender.length) {
                this.active = 0;
            } else if (this.active + num < 0) {
                this.active = this.bannersRender.length - 1;
            } else {
                this.active += num;
            }
            this.initInterval();
        },
    },
};
</script>

<style lang="less">
.mmv-banner {
    width: 700px;
    margin-bottom: 50px;
    &__container {
        position: relative;
        width: 700px;
        height: 254px;
        overflow: hidden;
    }
    &__slide {
        position: absolute;
        overflow: hidden;
        width: 366px;
        height: 170px;
        z-index: 1;
        border-radius: 8px;
        top: 40px;
        transition: all 300ms linear;
        background-color: #ccc;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
        user-select: none;
        img {
            width: 100%;
            height: 100%;
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-color: #000;
            opacity: 0.5;
            transition: opacity 300ms linear;
        }
    }
    &__prev {
        left: 20px;
        &1 {
            width: 427px;
            height: 198px;
            left: 0;
            top: 20px;
            z-index: 30;
        }
        &2 {
            left: -100px;
            z-index: 10;
        }
    }
    &__next {
        right: 20px;
        &1 {
            width: 427px;
            height: 198px;
            left: 273px;
            top: 20px;
            z-index: 30;
        }
        &2 {
            left: 434px;
            z-index: 10;
        }
    }
    &__prev,
    &__next {
        position: absolute;
        top: 50%;
        margin-top: -36px;
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        z-index: 55;
        cursor: pointer;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
            background-color: #4cc3ff;
        }
    }
    &__active {
        width: 496px;
        height: 234px;
        left: 102px;
        top: 0;
        z-index: 50;
        &::after {
            opacity: 0;
        }
    }
    &__pagination {
        position: absolute;
        bottom: 0 !important;
        text-align: center;
        height: 2px;
        width: 100%;
    }
    &__bullet {
        background-color: #dfe1e6;
        width: 20px;
        height: 2px;
        vertical-align: top;
        margin: 0 5px !important;
        cursor: pointer;
        display: inline-block;
        &active {
            background-color: #4cc3ff;
        }
    }
}
</style>